<template>
  <div class="login-page">
    <div class="login-head">
      <h3 class="title1">畅游汴京 开启精彩生活</h3>
      <h3 class="title2">汴京农商行-开封人自己的银行</h3>
      <!-- <img src="" alt=""> -->
    </div>
    <!-- 表单 -->
    <div class="login-form">
      <!-- <p style="line-height: 50px; color: #333;font-weight: 600;text-align: center;font-size: 20px;">欢迎使用购票系统</p> -->
      <van-form autocomplete="off" @submit="onSubmit" label-align="top" ref="form">
        <van-field name="phone" label="手机号" v-model="phone" :rules="mobileRules" placeholder="请输入手机号"
          type="tel"></van-field>
        <van-field v-model="password" label="密码" :rules="passwordRules" placeholder="请输入密码" type="password"
          autocomplete="off">
        </van-field>
        <van-field v-if="isRegister" v-model="confirmPassword" label="确认密码" :rules="[{ validator, message: '两次密码不一致' }]"
          placeholder="请确认密码" type="password" autocomplete="off">
        </van-field>
        <van-field v-if="isRegister" v-model="referralCode" label="推荐码" :rules="[
          {
            validator: (val) => {
              // 如果为空，允许通过
              if (!val) return true;

              // 检查长度不超过20
              return val.length <= 20;
            },
            message: '不能超过20个字符'
          }
        ]" placeholder="请输入推荐码（非必填）" autocomplete="off">
        </van-field>
        <div class="cp-cell">
          <van-checkbox v-model="agree">
            <span>我已同意</span>
            <a @click="navigateToUserAgreement()">《用户协议及隐私条款》</a>
          </van-checkbox>
        </div>
        <div class="cp-cell1">
          <van-button native-type="submit" block round type="primary" color="#CB161D">
            {{ isRegister ? '立即注册' : '登 录' }}
          </van-button>
        </div>
        <div class="cp-cell">
          <van-button native-type="button" block round type="default" @click="register">
            {{ isRegister ? '登 录' : '注 册' }}
          </van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { userRegister, loginByPassword } from "@/services/user";
import { useUserStore } from "@/stores";
import { codeRules, mobileRules, passwordRules } from "@/utils/rules";
import { showSuccessToast, showToast } from "vant";
import { encrypt } from "@/utils/jsencrypt.js";
import { ref, onMounted } from "vue";
import { useRoute, useRouter } from "vue-router";
// 注册确认密码

const loginRules = {
  username: [{ required: true, trigger: "blur", message: "请输入您的账号" }],
  password: [{ required: true, trigger: "blur", message: "请输入您的密码" }],
  // code: [{ required: true, trigger: "change", message: "请输入验证码" }]
};
const validator = (val: any): any => {
  return val === password.value
};
const phone = ref("");
const password = ref("");
const confirmPassword = ref("");
const referralCode = ref("");
const agree = ref(false);

const store = useUserStore();
const router = useRouter();
const route = useRoute();
const isRegister = ref(false);
function navigateToUserAgreement() {
  router.push(`/agreement?type=${isRegister.value}`);
}
const onSubmit = async () => {
  if (!agree.value) return showToast("请勾选协议");
  // 进行登录(合并短信登录)
  const res = isRegister.value
    ? await userRegister(phone.value, encrypt(password.value), encrypt(confirmPassword.value), referralCode.value)
    : await loginByPassword(phone.value, encrypt(password.value))
  store.setUser(res.data);

  if (isRegister.value) {
    showSuccessToast("注册成功");
    isRegister.value = false;
  } else {
    showSuccessToast("登录成功");
  }
  // router.replace((route.query.returnUrl as string) || "/home");
  router.replace("/home");
};

const register = () => {
  isRegister.value = !isRegister.value;
};

onMounted(() => {
  if (route.query.type == 'false') {
    isRegister.value = false
  } else if (route.query.type == 'true') {
    isRegister.value = true
  } else {
    isRegister.value = false
  }
  // route.query?.type ? isRegister.value = route.query.type : isRegister.value = false;
})

// const code = ref("");

// 发送短信验证码
// const { onSend, time, form } = useMobileCode(mobile);

// 密码的可见与不可见
// const isShow = ref(false);

// const url =
//   "https://graph.qq.com/oauth2.0/authorize?client_id=102015968&response_type=token&scope=all&redirect_uri=" +
//   encodeURIComponent(import.meta.env.VITE_APP_CALLBACK + "/login/callback");
</script>
<style lang="scss" scoped>
@import "@/styles/login.scss";

:deep(.van-field__error-message) {
  position: absolute !important;
  bottom: -18px;
}
</style>
